<template>
  <div class="yy-page yy-base-category">
    <div class="yy-page-header">
      <div class="yy-page-header_title">诊室与项目</div>
      <div class="yy-page-header_action">
        <el-button  @click="getCategoryList()">刷新</el-button>
        <el-button color="#009688" @click="onOpenDialog()">新增项目</el-button>
      </div>
    </div>
    <div class="yy-page-data">
       <WidgetTable  :is-loading="table.isLoading" :columns="table.columns" :data="table.data" :formats="table.formats" :paging-data="table.paging"></WidgetTable>
    </div>
    <RoomItemsRelation ref="roomItemsRelationRef" @saveSuccess="onSaveSuccess"/>
  </div>
</template>

<script setup lang="ts">

import {onBeforeMount, reactive, ref} from "vue";
import {QueueYjRoomItemsModel} from "@/model/QueueYjRoomItemsModel";
import {TableColumn} from "@/model/Definition";
import YjRoomItemsApi from "@/api/queue/YjRoomItemsApi";
import {formatDate} from "@/utils/yayi";
import WidgetTable from "@/components/widget/WidgetTable.vue";
import RoomItemsRelation from "@/views/queue/yj_room_items/RoomItemsRelation.vue";

const table = reactive<{
  isLoading: boolean,
  paging: any,
  columns: TableColumn[],
  data: QueueYjRoomItemsModel[],
  formats?: any
}>({
  isLoading: false,
  columns: [
    {
      "field":"index",
      "label":"序号",
      "type": "index",
      "showable":true,
      "align": 'center',
      "width": 60,
      "fixed": 'left'
    },
    {
      "field":"roomName",
      "label":"诊室名称",
      "showable":true,
      "fixed": 'left'
    },
    {
      "field":"itemName",
      "label":"项目名称",
      "showable":true,
      "width": 400,
      "fixed": 'left'
    },
    {
      "field":"itemCode",
      "label":"项目代码",
      "showable":true
    },
    {
      "field":"categoryName",
      "label":"类别名称",
      "showable":true
    },
    {
      "field":"categoryCode",
      "label":"类别代码",
      "showable":true
    },
  ],
  paging: {
    isPaging: true,
    total: 0,
    pageIndex: 1,
    pageSize: 30,
    pageChange: (pageIndex: number) => {
      if (pageIndex != table.paging.pageIndex) {
        getCategoryList(pageIndex);
      }
    }
  },
  data: [],
  formats: {
    'updateTime': {
      labelFormat: (val) => formatDate(val)
    },
    'action': {
      items: [
        {label: '编辑', elType: 'button', value: 'edit', atClick: (category: QueueYjRoomItemsModel) => onOpenDialog(category)},
      ]
    }
  }
})

const roomItemsRelationRef = ref()

onBeforeMount(() => {
  getCategoryList()
})

const getCategoryList = (pageIndex: number = 1) => {
  table.isLoading = true
  YjRoomItemsApi.listYjRoomItems(pageIndex, table.paging.pageSize).then((res) => {
    table.paging = Object.assign({}, table.paging, {pageIndex: +res.pageIndex, total: +res.total})
    table.data = res.data
    table.isLoading = false
  }, () => {
    table.isLoading = false
  })
}

const onOpenDialog = () => {
  roomItemsRelationRef.value.onShowModel()
}

const onSaveSuccess = () => {
  getCategoryList(1)
}

const onEditCallback = (category: QueueYjRoomItemsModel) => {
  const index = table.data.findIndex(item => item.id === category.id);
  if (index < 0) {
    table.data.unshift(category)
  } else {
    table.data.splice(index, 1, category)
  }
}
</script>

<style scoped lang="scss">
.yy-base-category {
  height: 100%;
}
</style>